<script setup>
import {HelpFilled, HomeFilled, InfoFilled, Location} from "@element-plus/icons-vue";

const route=useRoute()
const activeMenu=computed(() => {
  return route.path
})
import {useRoute, useRouter} from "vue-router";
import {computed} from "vue";

useRoute()
</script>

<template>
  <div style="display: flex; flex-direction: column; height: 100vh;">
    <!-- 顶部导航栏 -->
    <div style="height: 60px; background-color: #409EFF; width: 100%; display: flex; align-items: center;">
      <span style="font-size: 20px; color: white; height: 100%; display: flex; align-items: center; margin-left: 20px;">欢迎使用</span>
      <div style="flex: 1"></div>
      <div style="height: 100%; display: flex; align-items: center; margin-right: 20px;">
        <span style="font-size: 16px; color: white; margin-right: 10px;">1551</span>
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.m1kTzREr_mh9OeTjbLqTkwHaHa?w=192&h=192&c=7&r=0&o=7&pid=1.7&rm=3"
             style="width: 40px; height: 40px; border-radius: 50%;">
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div style="display: flex; flex: 1; overflow: hidden;">
      <!-- 侧边栏菜单 -->
      <div style="width: 200px; background-color: #f5f7fa; height: 100%;">
        <el-menu
            style="width: 200px; height: 100%; border-right: none;"
            class="el-menu-vertical-demo"
            router
            :default-active="activeMenu"
        >
          <el-menu-item index="/manager/hone">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/manager/info">
            <el-icon><InfoFilled /></el-icon>
            <span>信息管理</span>
          </el-menu-item>
          <el-menu-item index="/manager/book">
            <el-icon><HelpFilled /></el-icon>
            <span>图书管理</span>
          </el-menu-item>
          <el-sub-menu index="submenu">
            <template #title>
              <el-icon><Location /></el-icon>
              <span>二级菜单</span>
            </template>
            <el-menu-item index="/manager/hone">普通用户1</el-menu-item>
            <el-menu-item index="/manager/info">普通用户2</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>

      <!-- 右侧内容区域 -->
      <div style="flex: 1; padding: 20px; overflow-y: auto; background-color: #f0f2f5;">
        <div style="background: white; border-radius: 6px; padding: 20px; height: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
          <RouterView></RouterView>
        </div>
      </div>
    </div>
  </div>
</template>